<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="学期" prop="schoolYear">
            <el-select v-model="queryParams.schoolYear" placeholder="请选择" style="width: 240px">
              <el-option v-for="option in schoolYearList" :key="option.schoolYearId" :label="option.schoolYearId"
                :value="option.schoolYearId" />
            </el-select>
          </el-form-item>
          <el-form-item label="姓名" prop="nickName">
            <el-input v-model="queryParams.nickName" placeholder="请输入姓名" clearable style="width: 240px"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="queryParams.phone" placeholder="请输入手机号码" clearable style="width: 240px"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="审核状态" prop="auditStatus">
            <el-select v-model="queryParams.auditStatus" placeholder="用户状态" clearable style="width: 240px">
              <el-option v-for="dict in dict.type.external_teacher_audit_status" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
          </el-col>
          <!-- <el-col :span="1.5">
            <el-button
              type="info"
              plain
              icon="el-icon-upload2"
              size="mini"
              @click="handleImport"
              v-hasPermi="['system:user:import']"
              >导入</el-button
            >
          </el-col> -->
          <el-col :span="1.5">
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
              v-hasPermi="['system:user:export']">导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="userList">
          <!-- <el-table-column type="selection" width="50" align="center" /> -->
          <el-table-column label="序号" align="center" key="userId" width="150" prop="id" />
          <el-table-column label="工号" align="center" prop="userName" />
          <el-table-column label="姓名" align="center" key="nickName" prop="nickName" />
          <el-table-column label="性别" align="center" key="sex" prop="sex" />
          <el-table-column label="手机号码" align="center" key="phone" prop="phone" />
          <el-table-column label="受聘社团" align="center" key="orgName" prop="orgName" />
          <el-table-column label="学期" align="center" key="schoolYear" prop="schoolYear" />
          <el-table-column label="状态" align="center" key="status" prop="status">
          </el-table-column>
          <el-table-column label="审核状态" align="center" prop="auditStatus">
          </el-table-column>
          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-download" @click="handleDownLoad(scope.row)">下载</el-button>
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
              <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.auditStatus == '待审核'"
                @click="handleEdit(scope.row)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>
    <!-- 审核对话框 -->
    <el-dialog title="审核外聘老师" :visible.sync="actOpen" width="500px" append-to-body>

      <el-form ref="form" :model="formModel" label-width="100px">
        <el-form-item label="审核拒绝意见" prop="title">
          <el-input v-model="formModel.auditMessage" placeholder="如果拒绝请输入意见"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="actTeacher(2)">审核通过</el-button>
        <el-button @click="actTeacher(3)">审核拒绝</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="750px" append-to-body @before-close="handleDialogClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="userName">
              <el-select v-model="form.userName" filterable remote reserve-keyword placeholder="请输入关键词"
                :remote-method="remoteMethod" :loading="searchLoading">
                <el-option v-for="(item, index) in options" :key="index" :label="item.label"
                  :value="item.label.substring(0, item.label.lastIndexOf('-'))">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="照片" prop="avatar">
              <el-upload class="upload-demo" :action="cardUrl" :on-preview="handlePreview" :headers="headers"
                :on-success="changeAvatarImage" :limit="1" :file-list="fileList0" list-type="picture" ref="uploadRef">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in dict.type.sys_normal_yes" :key="dict.value" :label="dict.value">{{ dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社团" prop="orgId">
              <el-select v-model="form.orgId" filterable remote reserve-keyword placeholder="请输入关键词"
                :remote-method="remoteMethod2" :loading="searchLoading">
                <el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="学历" prop="educational">
              <el-select v-model="form.educational" placeholder="请选择学历">
                <el-option v-for="dict in dict.type.education_type" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开户行" prop="bank">
              <el-input v-model="form.bank" placeholder="请输入开户行" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行卡" prop="bankCard">
              <el-input v-model="form.bankCard" placeholder="请输入银行卡" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="车牌号" prop="carNumber">
              <el-input v-model="form.carNumber" placeholder="请输入车牌号" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信号" prop="wechatId">
              <el-input v-model="form.wechatId" placeholder="请输入微信号" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证" prop="idCard">
              <el-input v-model="form.idCard" placeholder="请输入身份证" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证正面" prop="idCardFrontPhoto">
              <el-upload class="upload-demo" :action="cardUrl" :on-preview="handlePreview" :headers="headers"
                :on-success="changePostIdImage" :limit="1" :file-list="fileList" list-type="picture" ref="uploadRef">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证反面" prop="idCardReversePhoto">
              <el-upload class="upload-demo" :action="cardUrl" :limit="1" :on-preview="handlePreview" :headers="headers"
                :file-list="fileList1" :on-success="changePostIdImage1" list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="资质" class="uploader-item">
              <el-upload v-model="form.aptitude" :action="cardUrl" :headers="upload.headers"
                accept="image/jpg,image/jpeg,image/png" list-type="picture-card" :limit="9" :on-success="handleSuccess"
                :before-upload="beforeAvatarUpload" :before-remove="() => false" :file-list="fileList2">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <el-input v-model="file.remark" placeholder="资质描述" clearable>
                  </el-input>
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span class="el-upload-list__item-delete" @click="handleRemove(file, fileList2)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <!-- //预览的图片弹框 -->
              <el-dialog class="review-dialog" append-to-body :visible.sync="imgDialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="从业经历" prop='experience'>
              <textarea v-model="form.experience" type="textarea" placeholder="请输入经历" rows="6" cols="60"></textarea>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- <el-dialog :visible.sync="open" width="640px" append-to-body>
      <div style="width:640px;height:972px;">
        <iframe id="iframeA" style="margin-right:0;" src="https://m.eqxiu.com/s/5VHxtgqd?bt=yxy" frameboder="0" scrolling="no">
          <p>您的浏览器不支持 iframe 标签。</p>
        </iframe>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  listTeacher,
  addTeacher,
  getTeacher,
  updateTeacher,
  delTeacher,
  getOrgList,
  actTeacher
} from '@/api/system/forTeacher';
import { listYear } from "@/api/system/year";
import {
  getTeacherManager,
} from '@/api/organ/studentOrgan';
import { getToken } from '@/utils/auth';
import { treeselect } from '@/api/system/dept';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import router from '@/router';

export default {
  name: 'User',
  dicts: ['sys_normal_yes', 'sys_user_sex', 'education_type', 'external_teacher_audit_status'],
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      formModel: {},
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      actOpen: false,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: '',
      // 部门树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      searchLoading: false,
      options: [],
      options1: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      actId: null,
      // 表单参数
      form: {
        aptitudeList: []
      },
      dialogImageUrl: '', //图片预览路径
      imgDialogVisible: false, //预览是否可见
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/system/user/importData',
      },
      fileList0: [],
      fileList: [],
      fileList1: [],
      fileList2: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        phone: undefined,
        schoolYear: null,
      },
      // 列信息
      columns: [
        { key: 0, label: `用户编号`, visible: true },
        { key: 1, label: `用户名称`, visible: true },
        { key: 2, label: `用户昵称`, visible: true },
        { key: 3, label: `系部`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true },
      ],
      // 表单校验
      rules: {
        userName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '用户状态不能为空', trigger: 'blur' }],
        educational: [{ required: true, message: '用户学历不能为空', trigger: 'blur' }],
        phone: [{ required: true, message: '用户手机号不能为空', trigger: 'blur' }],
        // aptitude: [{ required: true, message: '用户资质不能为空', trigger: 'blur' }],
        idCardFrontPhoto: [{ required: true, message: '用户身份证正面照片不能为空', trigger: 'blur' }],
        idCardReversePhoto: [{ required: true, message: '用户身份证反面照片不能为空', trigger: 'blur' }],
        bank: [{ required: true, message: '用户开户行不能为空', trigger: 'blur' }],
        orgId: [{ required: true, message: '用户社团不能为空', trigger: 'blur' }],
        bankCard: [{ required: true, message: '用户银行卡号不能为空', trigger: 'blur' }],
        wechatId: [{ required: true, message: '用户微信号不能为空', trigger: 'blur' }],
        idCard: [{ required: true, message: '用户身份证号不能为空', trigger: 'blur' }],
        experience: [{ required: true, message: '用户从业经历不能为空', trigger: 'blur' }],
      },
      cardUrl: process.env.VUE_APP_BASE_API + '/common/upload',
      headers: { Authorization: 'Bearer ' + getToken() },
      schoolYearList: [],
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getYearList();
    this.getList();
    this.getTreeselect();
    this.getConfigKey('sys.user.initPassword').then(response => {
      this.initPassword = response.msg;
    });

  },
  methods: {
    getYearList() {
      listYear().then(response => {
        this.schoolYearList = response.rows;
        for (let i = 0; i < response.total; i++) {
          if (response.rows[i].defaultValue == '1') {
            this.queryParams.schoolYear = response.rows[i].schoolYearId;
          }
        }
      });
    },
    handleEdit(row) {
      console.log(row);
      this.actId = row.id
      this.actOpen = true
    },
    actTeacher(type) {
      if (type == 2) {
        var data = {
          auditStatus: type,
          id: this.actId
        }
      } else {
        var data = {
          auditStatus: type,
          id: this.actId,
          auditMessage: this.formModel.auditMessage
        }
      }
      console.log(data);
      actTeacher(data).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.$message.success(res.msg)
          this.getList()
          this.actOpen = false
        }
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        getTeacherManager(query).then(response => {
          this.loading = false;
          this.options = response.rows.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        });
      } else {
        this.options = [];
      }
    },
    remoteMethod2(query) {
      console.log(query);
      if (query !== '') {
        this.loading = true;
        getOrgList(query).then(response => {
          console.log(response);
          this.loading = false;
          this.options1 = response.rows.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        });
      } else {
        this.options1 = [];
      }
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listTeacher(this.queryParams).then(response => {
        console.log(response);
        this.userList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleDialogClose() {
      // 通过 $refs 获取 Upload 组件的实例
      const uploadComponent = this.$refs.uploadRef;

      // 清除预览图片
      uploadComponent.clearFiles();
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.handleQuery();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.fileList0 = []
      this.fileList = []
      this.fileList1 = []
      this.fileList2 = []
      this.form = {
        aptitudeList: [],
        bankCard: null,
        carNumber: null,
        educational: null,
        experience: null,
        orgId: null,
        userName: null,
        phone: null,
        wechatId: null,
      };
      this.resetForm('form');
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      // this.form.nickName = ''
      this.resetForm('queryForm');
      this.getYearList();
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.options = []
      this.options1 = []
      // getUser().then(response => {
      // this.postOptions = response.posts;
      // this.roleOptions = response.roles;
      this.open = true;
      this.title = '添加外聘老师';
      // this.form.password = this.initPassword;
      // });
    },
    // 下载按钮下载外聘教师表格
    handleDownLoad(row) {
      console.log("下载表格");
      router.push({ path: '/system/forTeacher-pdf/index/' + row.id });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getTeacher(id).then(response => {
        console.log(response);
        this.open = true;
        this.title = '修改外聘老师';
        this.form = response.data
        this.remoteMethod(this.form.userName)
        this.remoteMethod2(this.form.orgName)
        this.form.idCardFrontPhotos == null ? this.fileList == [] : this.fileList = this.form.idCardFrontPhotos
        this.form.idCardReversePhotos == null ? this.fileList1 == [] : this.fileList1 = this.form.idCardReversePhotos
        this.form.avatar == null ? this.fileList0 == [] : this.fileList0 = [{ url: this.form.avatar }];
        this.form.aptitudes == null ? this.fileList2 == [] : this.fileList2 = this.form.aptitudes
        this.form.aptitudeList == null ? this.form.aptitudeList == [] : this.form.aptitudeList
        // this.form.aptitude == null ? this.fileList2==[{url:''}]:this.form.aptitude.forEach(item=>{this.fileList2.url.push(item)})
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      console.log(this.fileList2, this.form.aptitudeList, "ressssssss")
      // let that = this;
      var fileList2 = this.fileList2;
      fileList2.forEach((item, index) => {
        item = {
          url: item.url,  //要上传的路径
          remark: item.remark  //要上传的图片说明
        }
      });
      this.form.aptitudeList = fileList2;

      console.log(this.form);
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.userId != undefined) {
            updateTeacher(this.form).then(response => {
              this.$modal.msgSuccess('修改成功');
              this.open = false;
              this.getList();
            });
          } else {
            addTeacher(this.form).then(response => {
              this.$modal.msgSuccess('新增成功');
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id;
      this.$modal
        .confirm('是否确认删除用户编号为"' + ids + '"的数据项？')
        .then(function () {
          return delTeacher(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess('删除成功');
        })
        .catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'system/user/export',
        {
          ...this.queryParams,
        },
        `user_${new Date().getTime()}.xlsx`
      );
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '用户导入';
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`);
    },
    //资质文件上传（文件上传成功时的钩子）*************************************
    handleSuccess(res, file, fileList) {
      console.log(res, file, "ressssssss")
      if (res.code == 200 && res.url) {
        this.fileList2.push({
          // url: file.url,   //图片渲染路径
          url: res.url,  //要上传的路径
          remark: ''  //要上传的图片说明
        })
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = ['image/jpg', 'image/jpeg', 'image/png'].includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt5M
    },
    //删除
    handleRemove(file, fileList) {
      this.fileList2 = fileList.filter((item) => {
        return item.uid !== file.uid
      })
    },
    //预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.imgDialogVisible = true
    },
    // *****************************************************************


    handlePreview(file) {
      console.log(file);
    },
    uploadContractFun(file) {
      return new Promise((resolve, reject) => {
        //项目要求是大于5MB的图片进行压缩，可根据项目情况自行判断
        if (file.size > 60 * 1024) {
          // console.log('压缩前', file) // 压缩到400KB
          imageConversion.compressAccurately(file, 50).then(res => {
            res = new File([res], file.name, { type: res.type, lastModified: Date.now() })
            resolve(res)
          })
        } else {
          resolve(file)
        }
      })
    },
    changeAvatarImage(response, file, fileList) {
      this.form.avatar = response.url
    },
    changePostIdImage(response, file, fileList) {
      // console.log(response.data.url);
      this.form.idCardFrontPhoto = response.url
      // console.log(file, fileList);
    },
    changePostIdImage1(response, file, fileList) {
      // console.log(response.data.url);
      this.form.idCardReversePhoto = response.url
      // console.log(file, fileList);
    },
    changePostIdImage2(response, file, fileList) {
      this.form.aptitudeList.push(response.url)
      console.log(this.form.aptitudeList);
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
        response.msg +
        '</div>',
        '导入结果',
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
  },
}
</script>
<style lang="scss" scoped>

#iframeA {
        position: absolute;
        transform: scale(2, 2) translate(25%, 25%);
        width: 50%;
        height: 50%;
        top: 0;
        left: 0
    }
.uploader-item {
  // margin: 60px 0 60px;

  ::v-deep .el-upload-list {
    .is-success {
      overflow: hidden;
      height: auto;
      width: 192px;
      border: 0;
      border-radius: 0;
      margin-right: 10px;

      img,
      .el-upload-list__item-actions {
        height: 108px;
      }

      .el-input {
        .el-input__inner {
          height: 32px;
        }
      }
    }

    .is-ready,
    .is-uploading {
      display: none;
    }
  }

  ::v-deep .el-upload {
    width: 192px;
    height: 108px;
    line-height: 108px;
    background: transparent;
    border: 1px solid #dcdfe6;
    border-radius: 0;
    margin-bottom: 20px;

    .el-icon-plus {
      color: #dcdfe6;
      font-size: 24px;
    }
  }
}
</style>